<template>
  <CommonNav title="设置">
    <template v-slot:search>
      <button class="btn btn-active btn-primary btn-sm">恢复默认设置</button>
    </template>
  </CommonNav>
  <CommonMain>
    <div role="" class="tabs tabs-border">
      <div class="flex" v-for="(item, index) in menus" :key="index">
        <button
          class="relative px-4 py-2 text-base font-medium t"
          :class="[currentComponent === item.component ? 'text-primary' : '']"
        >
          {{ item.name }}
          <span
            class="absolute bottom-0 left-[10%] w-[80%] h-[0.2rem] rounded bg-primary"
            v-if="currentComponent === item.component"
          ></span>
        </button>
      </div>
    </div>
    <div class="h-full">
      <div class="flex flex-col h-full">
        <div class="flex-1 p-5">
          <component :is="resolvedComponent" />
        </div>
      </div>
    </div>
  </CommonMain>
</template>
<script setup>
defineProps({
  isOpen: {
    type: Boolean,
    default: false,
  },
});
const menus = [
  {
    name: "基础设置",
    component: markRaw(resolveComponent("SettingsConfig")),
  },
];
const currentComponent = ref(menus[0].component);
const resolvedComponent = computed(() => {
  return currentComponent.value || "div";
});
</script>
